<!-- 登录界面 -->
<template>
    <div>
      <h1>登录页面</h1>
      <form @submit.prevent="login">
        <div>
          <label for="name">姓名:</label>
          <input type="text" id="name" v-model="name" required>
        </div>
        <div>
          <label for="personalId">个人专属号码:</label>
          <input type="text" id="personalId" v-model="personalId" required>
        </div>
        <button type="submit">登录</button>
      </form>
      <p v-if="message">{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    name: 'LoginPage',
    data() {
      return {
        name: '',
        personalId: '',
        message: ''
      };
    },
    methods: {
      login() {
        let users = JSON.parse(localStorage.getItem('users')) || [];
        let user = users.find(user => user.name === this.name && user.personalId === this.personalId);
        if (user) {
          alert('登录成功');
          this.$router.push('/home');
        } else {
          this.message = '用户名或个人专属号码错误';
        }
      }
    }
  };
  </script>
  
  <style scoped>

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; 
    background-color: #f5f5dc; /* 浅黄色背景 */
    padding: 50px; /* 内边距 */
    box-sizing: border-box; /* 边框计算在宽度和高度内 */
  }
  
  /* 表单样式 */
  form {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin-top: 500px;
    max-width: 400px; /* 最大宽度 */
    background: white; /* 表单背景色 */
    padding: 20px; /* 表单内边距 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  }
  
  /* 表单元素样式 */
  form div {
    margin-bottom: 15px; /* 元素之间的间距 */
  }
  
  label {
    margin-bottom: 5px; /* 标签与输入框之间的间距 */
  }
  
  input {
    width: 100%; /* 宽度占满父元素 */
    padding: 10px; /* 输入框内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 输入框圆角 */
  }
  
  button {
    padding: 10px;
    background-color: #007bff; /* 按钮背景色 */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3; /* 鼠标悬浮时的按钮背景色 */
  }
  
  /* 消息提示样式 */
  p {
    color: red; /* 错误消息颜色 */
    margin-top: 15px; /* 消息与表单之间的间距 */
    text-align: center; /* 文本居中 */
  }
  </style>